<template>
	<view>
		<view class="content">
			<view class="title">
				<text>请选版本</text>
			</view>
			<view class="title-sug">
				<text>建议您选择简化版</text>
			</view>

			<view class="easy" @tap="toEasy()">
				<view class="kind">
					<text>简化版</text>
				</view>
			</view>

			<view class="easyExplain">
				<text>简化版:文字、图标、按钮放大，有语音辅助功能。</text>
			</view>

			<view class="general" @tap="toGeneral()">
				<view class="kind">
					<text>标准版</text>
				</view>
			</view>

			<view class="generalExplain">
				<text>标准版：文字、图标、按钮适中；功能更全。</text>
			</view>

			<!-- 			<view class="finish">
				<button type="default" @click="finish()">完成</button>
			</view> -->
		</view>
		<view class="popup" v-show="show">
			<view class="popup-info">
				<view class="inputWrapper">
					<input class="input" v-model="HomeId" type="text" value="" placeholder="请输入家庭ID" />
				</view>
				<view class="sug1">
					<text>可后绑定 当前跳过</text>
				</view>
				<view class="sug2">
					<text>由亲属提供家庭ID</text>
				</view>
				<button class="bindBtn" type="default" @tap="bind">一键绑定</button>
				<button class="laterBtn" type="default" @tap="later">稍后绑定</button>

			</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				isvisited: -1,
				areaShow: true,
				areaTxt: '',
				show: true, //是否弹框
				HomeId: '',
			}
		},
		methods: {
			// cancelAdd() {
			// 	this.areaShow = false
			// },
			// confirmAdd() {
			// 	this.areaShow = false
			// },
			//样式选择
			// visitfun(index) {
			// 	this.isvisited = index;
			// },
			toEasy() {
				uni.switchTab({
					url: '../oldster/reduction/Home/Home'
				})
			},
			toGeneral() {
				uni.navigateTo({
					url: '../general/general'
				})
			},

			//弹框显示
			bind() {
				uni.$showMsg('绑定成功');
				this.show = false;
				// this.$request.post('/Binding/OldsterBindHome', {
				// 	HomeId: this.HomeId
				// }).then(data => {
				// 	console.log('data', data);
				// 	if (data.data.code === "200") {
				// 		uni.$showMsg('绑定成功');
				// 		this.show = false;
				// 	}else{
				// 		uni.$showMsg('绑定失败');
				// 	}
				// })
			},
			later() {
				this.show = false;
			}


		}
	}
</script>

<style>
	.content {
		height: 100vh;
		width: 100vw;
		/* background-color: #808080; */
	}

	.title {
		height: 10%;
		width: 80%;
		text-align: center;
		margin: 0 auto;
		font-size: 90rpx;
		font-weight: bold;
		position: relative;
		top: 5%;
	}

	.title-sug {
		height: 7%;
		width: 80%;
		text-align: center;
		margin: 0 auto;
		font-size: 50rpx;
		/* font-weight: bold; */
		position: relative;
		top: 8%;
	}

	.easy {
		position: relative;
		height: 14%;
		width: 80%;
		background-color: #F69D1D;
		color: #FFFFFF;
		font-size: 160rpx;
		border-radius: 2vh;
		text-align: center;
		margin: 0 auto;
		top: 12%;
	}

	.easyExplain {
		position: relative;
		height: 5%;
		width: 80%;
		font-size: 40rpx;
		text-align: left;
		margin: 0 auto;
		top: 15%;
		letter-spacing: 2px;
	}

	.general {
		position: relative;
		height: 14%;
		width: 80%;
		background-color: #F6681E;
		color: #FFFFFF;
		font-size: 160rpx;
		border-radius: 2vh;
		text-align: center;
		margin: 0 auto;
		top: 25%;
	}


	.generalExplain {
		position: relative;
		height: 5%;
		width: 80%;
		font-size: 40rpx;
		text-align: left;
		margin: 0 auto;
		top: 30%;
		letter-spacing: 2px;
	}

	.finish {
		position: relative;
		width: 60%;
		margin: 0 auto;
		top: 50%;
	}

	.kind {
		padding-top: 8%;
		font-size: 58rpx;
		font-weight: bold;
	}

	.visited {
		border: 10rpx solid #00FF7F;
	}

	.modal {
		height: 50%;
		width: 80%;
		background-color: #00aaff;
		position: absolute;
		top: 10%;
		right: 10%;
		border-radius: 2vh;
		/* padding: 0 75rpx; */
		/* margin-top: 30px; */
		/* margin: 0 auto; */
	}

	.inputWrapper {
		width: 100%;
		height: 120upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 50px;
		margin-top: 25px;
	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 50rpx;
		position: relative;
		border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
		border-radius: 2vh;
	}


	/* 提示绑定 */
	.popup {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9998;
	}

	.popup-info {
		position: fixed;
		width: 70vw;
		height: 50vh;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 30upx;
		padding: 40upx;
		border-radius: 20upx;
		background-color: #fff;
		z-index: 9999;
	}

	.inputWrapper {
		width: 100%;
		height: 120upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 50rpx;
		position: relative;
		border: 1px solid #bfbfbf;
		box-shadow: 0 0 10px 2px #bdcee0;
		border-radius: 2vh;
	}

	.sug1 {
		height: 7%;
		width: 90%;
		text-align: center;
		margin: 0 auto;
		font-size: 54rpx;
		/* 	position: relative;
		top: 7%; */
		margin-top: 4vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.sug2 {
		height: 7%;
		width: 90%;
		text-align: center;
		margin: 0 auto;
		font-size: 58rpx;
		color: #F76D2E;
		/* position: relative;
		top: 12%; */
		margin-top: 4vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bindBtn {
		width: 100%;
		height: 120upx;
		color: #FFFFFF;
		letter-spacing: 2vh;
		text-align: center;
		font-size: 50rpx;
		background: linear-gradient(#FEBC86, #F76D2E);
		border-radius: 2vh;
		margin-top: 10%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.laterBtn {
		width: 100%;
		height: 120upx;
		color: #FFFFFF;
		letter-spacing: 2vh;
		text-align: center;
		font-size: 50rpx;
		background: linear-gradient(#c7c0b8, #4f4747);
		border-radius: 2vh;
		margin-top: 10%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
